popupMenu: Split submenu expansion and arrow rotation

When expanding a submenu, we currently use a single tween to animate
both the submenu actor and the source arrow. We do this by tweening
a monkey-patched JS property on the main actor, which we then use
to update the arrow's GObject property on updates. As Clutter cannot
animate random JS properties, this trick will prevent us from using
implicit animations here.

The only reason I can think of for using a single tween is to keep
both animations in perfect lock step, but as expansion and rotation
are visually quite distinct, this shouldn't be required, so just
set up separate animations for each actor.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/22

diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index 8fd439fc86bfb863ce615a0e163087230958a273..cab383e92efbb977750955b340849b527db28cf6 100644 (file)
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -1013,18 +1013,16 @@ var PopupSubMenu = class extends PopupMenuBase {
         if (animate) {
             let [, naturalHeight] = this.actor.get_preferred_height(-1);
             this.actor.height = 0;
-            this.actor._arrowRotation = this._arrow.rotation_angle_z;
             Tweener.addTween(this.actor,
-                             { _arrowRotation: targetAngle,
-                               height: naturalHeight,
+                             { height: naturalHeight,
                                time: 0.25,
-                               onUpdate: () => {
-                                   this._arrow.rotation_angle_z = this.actor._arrowRotation;
-                               },
                                onComplete: () => {
                                    this.actor.set_height(-1);
                                }
                              });
+            Tweener.addTween(this._arrow,
+                             { rotation_angle_z: targetAngle,
+                               time: 0.25 });
         } else {
             this._arrow.rotation_angle_z = targetAngle;
         }
@@ -1044,19 +1042,17 @@ var PopupSubMenu = class extends PopupMenuBase {
             animate = false;
 
         if (animate) {
-            this.actor._arrowRotation = this._arrow.rotation_angle_z;
             Tweener.addTween(this.actor,
-                             { _arrowRotation: 0,
-                               height: 0,
+                             { height: 0,
                                time: 0.25,
-                               onUpdate: () => {
-                                   this._arrow.rotation_angle_z = this.actor._arrowRotation;
-                               },
                                onComplete: () => {
                                    this.actor.hide();
                                    this.actor.set_height(-1);
                                },
                              });
+            Tweener.addTween(this._arrow,
+                             { rotation_angle_z: 0,
+                               time: 0.25 });
         } else {
             this._arrow.rotation_angle_z = 0;
             this.actor.hide();